<script setup lang="ts">
import {computed, getCurrentInstance, ref} from "vue";

const globalP = getCurrentInstance()?.appContext.config.globalProperties;
console.log(globalP)

let w = ref(globalP.$w);
let w_2 = ref(globalP.$w_2);

let h = ref(globalP.$h);


let w2 = computed(() => {
  return w.value + "px";
})
let w2_2 = computed(() => {
  return w_2.value + "px";
})

let h2 = computed(() => {
  return h.value + "px";
})

//宽减50
let del_w = () => {
  w.value -= 5
}
//宽加50
let num_w = () => {
  w.value += 5
}

//高减50
let del_h = () => {
  h.value -= 5
}

//高加50
let num_h = () => {
  h.value += 5
}

let del_w_2 = () => {
  w_2.value -= 5
}
let num_w_2 = () => {
  w_2.value += 5
}

let mssage = "q w e r t"


console.log(mssage.includes("w", 1))
console.log(mssage.startsWith("t", 8))
console.log(mssage.endsWith("q w e ", 6))
alert(String.fromCodePoint(9811))
</script>

<template>
  <div>
    <div>宽度:<input type="number" v-model="w"/>
      <button @click="del_w">-</button>
      <button @click="num_w">+</button>
    </div>
    <div>高度:<input type="number" v-model="h"/>
      <button @click="del_h">-</button>
      <button @click="num_h">+</button>
    </div>

    <div>宽度2:<input type="number" v-model="w_2"/>
      <button @click="del_w_2">-</button>
      <button @click="num_w_2">+</button>
    </div>

    <div class="uu">
      <div class="uu1">{{ w }}</div>
      <div class="uu2">{{ w_2 }}</div>
    </div>
  </div>

</template>

<style lang="scss" scoped>
$color: #f8f8f8;
.uu {
  width: 500px;
  display: flex;
  background: $color;
  border: 1px black solid;
  border-radius: 100px 100px;
}

.uu1 {
  background-image: linear-gradient(120deg, rgb(214, 90, 127), rgb(214, 105, 89));
  width: v-bind(w2);
  border-radius: 100px 0 0 100px;
  //height: v-bind(h2);
  //position: absolute;
  //left: 0;
  //right: 0;
  //margin: auto;

}

.uu2 {
  background-image: linear-gradient(120deg, #c14b6c, #8a5a8f);
  width: v-bind(w2_2);
  border-radius: 0 100px 100px 0;
}
</style>
